<template>
  <div style="margin: 20px">{{ message }}</div>
  <div>

    <div style="margin: 10px">    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger" @click="handleClick">Danger</el-button>
    </el-row></div>

    <div style="margin: 10px">
      <el-row class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </el-row>
    </div>

    <div style="margin: 10px">
      <el-row class="mb-4">
      <el-button round>Round</el-button>
      <el-button type="primary" round>Primary</el-button>
      <el-button type="success" round>Success</el-button>
      <el-button type="info" round>Info</el-button>
      <el-button type="warning" round>Warning</el-button>
      <el-button type="danger" round>Danger</el-button>
    </el-row></div>
    <div style="margin: 10px">
      <el-row>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </el-row></div>

  </div>

  <div style="margin: 10px">
    <div>
      <el-icon :size="size" :color="color">
        <Edit />
      </el-icon>
    </div>
    <el-input
      v-model="input1"
      class="w-50 m-2"
      style="width: 200px"
      placeholder="Pick a date"
      :suffix-icon="Calendar"
    />
  </div>
  <RouterView />
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import '@element-plus/icons-vue'
import { Calendar, Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'

const message = ref('hello,wold')
const obj: any = ref({
  a: '2'
})
const size = '35px'
const color = ref('red')
const input1 = ref('')
const res: any = obj.value?.b?.c || 'string'
console.log(res)

const color16 = () => {
  const r = Math.floor(Math.random() * 256)
  const g = Math.floor(Math.random() * 256)
  const b = Math.floor(Math.random() * 256)
  return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`
}
const handleClick = () => {
  color.value = color16()
}

</script>
